<template>
  <PageWrapper v-loading="loading" loading-tip="加载中...">
    <div class="p-4 p-4-tag">
      <div class="tag">
        <div class="form-box">
          <BasicForm @register="registerForm">
            <template #btns>
              <a-button class="btns-one" @click="throttleReset">重置</a-button>
              <a-button type="primary" @click="throttleSubmit">查询</a-button>
            </template>
          </BasicForm>
        </div>
        <div class="table-box">
          <BasicTable @register="registerTable" />
        </div>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { ref, onMounted } from 'vue';
  import { useDebounceFn } from '@vueuse/core';
  import dayjs from 'dayjs';

  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { getHDAHistory } from '/@/api/hda/index';
  import { dateUtil } from '/@/utils/dateUtil';

  let loading = ref(false);
  // 表单数据
  let columns: BasicColumn[] = [
    {
      title: '时间',
      dataIndex: 'Time',
    },
    {
      title: '设备名',
      dataIndex: 'DeviceName',
    },
    {
      title: '变量全称',
      dataIndex: 'FullName',
    },
    {
      title: '变量名',
      dataIndex: 'Name',
    },
    {
      title: '布尔值',
      dataIndex: 'BoolValue',
    },
    {
      title: '整型值',
      dataIndex: 'IntValue',
    },
    {
      title: '浮点值',
      dataIndex: 'DoubleValue',
    },
    {
      title: '字符串',
      dataIndex: 'StringValue',
    },
    {
      title: '数据类型',
      dataIndex: 'DataType',
    },
    {
      title: '质量戳',
      dataIndex: 'QualityStamp',
    },
  ];
  let tableParams = {
    StartTime: dateUtil().format('YYYY-MM-DD 00:00:00'),
    EndTime: dateUtil().add(1, 'day').format('YYYY-MM-DD 00:00:00'),
    FullName: '',
    DeviceName: '',
    Name: '',
    OrderType: 0,
  };
  const [registerTable, { reload, getPaginationRef, setPagination }] = useTable({
    title: '',
    api: getHDAHistory,
    immediate: false,
    columns,
    showIndexColumn: false,
    isCanResizeParent: true,
    striped: true,
    bordered: true,
    fetchSetting: {
      pageField: 'PageNO',
      sizeField: 'PageSize',
      totalField: 'TotalRows',
      listField: 'Rows',
    },
    beforeFetch: () => {
      return [
        {
          ...tableParams,
          PageNO: getPaginationRef().current || 1,
          PageSize: getPaginationRef().pageSize || 50,
        },
      ];
    },
    afterFetch: (v) => {
      return v.map((item) => {
        item.BoolValue = item.BoolValue.toString();
        return item;
      });
    },
  });
  // 表单内容
  const schemas: FormSchema[] = [
    {
      field: 'times',
      label: '时间范围：',
      component: 'RangePicker',
      componentProps: {
        format: 'YYYY-MM-DD HH:mm:ss',
        placeholder: ['开始时间', '结束时间'],
        showTime: { format: 'HH:mm:ss' },
        ranges: { 现在: [dayjs(), dayjs()] },
      },
      colProps: {
        span: 7,
      },
      rules: [
        {
          required: true,
          message: '请选择开始和结束时间',
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'DeviceName',
      component: 'Input',
      label: '设备名：',
      colProps: {
        span: 4,
      },
    },
    {
      field: 'FullName',
      component: 'Input',
      label: '变量全称：',
      colProps: {
        span: 4,
      },
    },
    {
      field: 'Name',
      component: 'Input',
      label: '变量名：',
      colProps: {
        span: 4,
      },
    },
    {
      field: 'OrderType',
      component: 'Switch',
      label: '排序方式:',
      defaultValue: 0,
      componentProps: {
        checkedChildren: '正序',
        checkedValue: 0,
        unCheckedChildren: '倒序',
        unCheckedValue: 1,
      },
      colProps: {
        span: 4,
      },
    },
    {
      field: 'btns',
      component: 'Input',
      label: '   ',
      slot: 'btns',
      labelWidth: 20,
      colProps: {
        span: 4,
      },
    },
  ];
  const [registerForm, { validateFields, setFieldsValue }] = useForm({
    labelWidth: 100,
    schemas: schemas,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  onMounted(async () => {
    reload();
    setFieldsValue({
      times: [tableParams.StartTime, tableParams.EndTime],
    });
  });
  const throttleSubmit = useDebounceFn(handleSubmit, 500);
  const throttleReset = useDebounceFn(handleResetFields, 500);

  async function handleResetFields() {
    tableParams = {
      StartTime: dateUtil().format('YYYY-MM-DD 00:00:00'),
      EndTime: dateUtil().add(1, 'day').format('YYYY-MM-DD 00:00:00'),
      FullName: '',
      DeviceName: '',
      Name: '',
      OrderType: 0,
    };
    setPagination({
      current: 1,
      pageSize: 50,
    });
    reload();
    setFieldsValue({
      times: [tableParams.StartTime, tableParams.EndTime],
      FullName: '',
      DeviceName: '',
      Name: '',
    });
  }
  async function handleSubmit() {
    try {
      let res = await validateFields();
      console.log('passing', res);
      tableParams = {
        StartTime: dateUtil(res.times[0]).format('YYYY-MM-DD HH:mm:ss'),
        EndTime: dateUtil(res.times[1]).format('YYYY-MM-DD HH:mm:ss'),
        FullName: res.FullName || '',
        DeviceName: res.DeviceName || '',
        Name: res.Name || '',
        OrderType: res.OrderType,
      };
      setPagination({
        current: 1,
        pageSize: 50,
      });
      reload();
    } catch {}
  }
</script>
<script lang="ts">
  export default {
    name: 'HDAIndx',
  };
</script>
<style lang="less" scoped>
  .p-4-tag {
    width: 100%;
    height: 100%;
    padding: 0px !important;
    position: relative;

    .tag {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
    }

    .form-box {
      padding: 5px;
    }

    .table-box {
      flex: 1;
    }
  }

  ::v-deep .ant-picker {
    width: 100% !important;
  }

  .btns-one {
    margin-right: 10px;
  }
</style>
